﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>状态显示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/layui/vue.min.js"></script>
    <script src="~/layui/lib/index.js"></script>
    <script src="~/layui/polyfill.min.js"></script>
    <script src="~/layui/axios.js"></script>
    <style>
        .el-dialog__body {
            padding: 5px 10px;
        }

        .el-table td {
            padding: 0;
        }

        .el-table__row {
            height: 48px;
        }

        .el-table .spanClass {
            display: block;
            width: 100%;
            min-width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-button size="mini" type="success" v-on:click="refresh">刷新状态</el-button>
        <el-form label-position="left">
            <el-form-item label="梯控开关状态:" style="margin-bottom:0;">
                <el-tag v-if="statusInfo.powerStatus === -1">梯控开关状态未查询到</el-tag>
                <el-tag type="danger" v-else-if="statusInfo.powerStatus === 0">退出梯控</el-tag>
                <el-tag type="success" v-else>进入梯控</el-tag>
            </el-form-item>
            <el-form-item label="连接状态:" style="margin-bottom:0;">
                <el-tag type="info" v-if="statusInfo.hdConnect === 0">未开始</el-tag>
                <el-tag type="warning" v-else-if="statusInfo.hdConnect === 1">注册中</el-tag>
                <el-tag type="primary" v-else>心跳发送中</el-tag>
            </el-form-item>
            <el-form-item label="主副电梯连接状态:" style="margin-bottom:0;">
                <el-tag type="success" v-if="connectionState === 1">连接</el-tag>
                <el-tag type="info" v-else>未连接</el-tag>
            </el-form-item>
        </el-form>
    </div>
    <script src="~/layui/jquery-3.3.1.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: function(){
                return {
                    statusInfo: {},
                    connectionState: 0
                }
            },
            created: function() {
                this.query()
            },
            methods: {
                query: function () {
                    var _this = this;
                    axios({
                        method: 'post',
                        url: '/api/Device/QueryStatus',
                    }).then(function(res) {
                        if (res.data.errcode !== 0) return _this.$message.error(res.data.errmsg)
                        console.log(res.data.data)
                        _this.statusInfo = res.data.data
                    })
                    axios({
                        method: 'post',
                        url: '/api/Device/QueryConnect',
                    }).then(function(res) {
                        if (res.data.errcode !== 0) return _this.$message.error(res.data.errmsg)
                        console.log(res)
                        _this.connectionState = res.data.data
                    })
                },
                // 刷新状态
                refresh:function() {
                    this.query();
                }
            }
        })
    </script>

</body>
</html>